<template>
  <div class="design-works-container">
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="作品状态">
          <el-select v-model="filterForm.status" placeholder="选择状态" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服装类型">
          <el-select v-model="filterForm.clothingType" placeholder="选择类型" clearable>
            <el-option
              v-for="item in clothingTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传日期">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="action-bar">
      <el-button type="primary" icon="el-icon-plus" @click="handleUpload">上传新作品</el-button>
      <el-button type="info" icon="el-icon-pie-chart">查看数据统计</el-button>
    </div>

    <div class="works-grid">
      <el-card
        v-for="(item, index) in designWorks"
        :key="index"
        class="work-card"
        :body-style="{ padding: '0px' }">
        <div class="work-image">
          <el-image :src="item.coverImage" fit="cover" style="width: 100%; height: 100%;" @click="handlePreview(item)">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <div class="work-status" :class="getStatusClass(item.status)">
            {{ getStatusText(item.status) }}
          </div>
        </div>
        <div class="work-info">
          <h3 class="work-title">{{ item.title }}</h3>
          <div class="work-meta">
            <span>
              <i class="el-icon-date"></i> {{ item.createTime }}
            </span>
            <span>
              <i class="el-icon-view"></i> {{ item.views }}
            </span>
            <span>
              <i class="el-icon-star-on"></i> {{ item.likes }}
            </span>
          </div>
          <div class="work-tags">
            <el-tag size="mini" type="info">{{ item.clothingType }}</el-tag>
            <el-tag size="mini" type="success">{{ item.style }}</el-tag>
          </div>
          <div class="work-actions">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(item)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[8, 12, 16, 24]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </div>

    <!-- 上传新作品对话框 -->
    <el-dialog title="上传新作品" :visible.sync="uploadDialogVisible" width="50%">
      <el-form :model="workForm" :rules="workRules" ref="workFormRef" label-width="100px">
        <el-form-item label="作品标题" prop="title">
          <el-input v-model="workForm.title" placeholder="请输入作品标题"></el-input>
        </el-form-item>
        <el-form-item label="服装类型" prop="clothingType">
          <el-select v-model="workForm.clothingType" placeholder="请选择服装类型" style="width: 100%">
            <el-option v-for="item in clothingTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计风格" prop="style">
          <el-select v-model="workForm.style" placeholder="请选择设计风格" style="width: 100%">
            <el-option v-for="item in styleTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作品描述" prop="description">
          <el-input type="textarea" :rows="4" v-model="workForm.description" placeholder="请详细描述您的作品..."></el-input>
        </el-form-item>
        <el-form-item label="封面图片" prop="coverImage">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :limit="1"
            list-type="picture-card"
            :on-change="handleCoverChange">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="详情图片" prop="detailImages">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="previewDialogVisible">
            <img width="100%" :src="previewImageUrl" alt="预览图">
          </el-dialog>
        </el-form-item>
        <el-form-item label="关键词" prop="keywords">
          <el-tag
            :key="tag"
            v-for="tag in workForm.keywords"
            closable
            :disable-transitions="false"
            @close="handleTagClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新关键词</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitWorkForm('workFormRef')">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 作品预览对话框 -->
    <el-dialog title="作品预览" :visible.sync="previewWorkDialogVisible" width="70%">
      <div v-if="currentWork">
        <h2 class="preview-title">{{ currentWork.title }}</h2>
        <div class="preview-meta">
          <span><i class="el-icon-date"></i> 上传时间：{{ currentWork.createTime }}</span>
          <span><i class="el-icon-view"></i> 浏览量：{{ currentWork.views }}</span>
          <span><i class="el-icon-star-on"></i> 点赞数：{{ currentWork.likes }}</span>
        </div>
        <div class="preview-tags">
          <el-tag size="small" type="info">{{ currentWork.clothingType }}</el-tag>
          <el-tag size="small" type="success">{{ currentWork.style }}</el-tag>
          <el-tag size="small" v-for="(tag, index) in currentWork.keywords" :key="index">{{ tag }}</el-tag>
        </div>
        <div class="preview-description">
          <p>{{ currentWork.description }}</p>
        </div>
        <div class="preview-images">
          <el-carousel height="400px">
            <el-carousel-item v-for="(img, index) in currentWork.detailImages" :key="index">
              <img :src="img" class="preview-image"/>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="preview-stats">
          <h3>作品数据</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="stat-card">
                <div class="stat-value">{{ currentWork.commentCount }}</div>
                <div class="stat-label">评论数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-card">
                <div class="stat-value">{{ currentWork.favoriteCount }}</div>
                <div class="stat-label">收藏数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-card">
                <div class="stat-value">{{ currentWork.orderCount }}</div>
                <div class="stat-label">定制订单</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DesignWorks',
  data() {
    return {
      filterForm: {
        status: '',
        clothingType: '',
        dateRange: []
      },
      statusOptions: [
        { value: 'draft', label: '草稿' },
        { value: 'pending', label: '待审核' },
        { value: 'approved', label: '已通过' },
        { value: 'rejected', label: '已拒绝' }
      ],
      clothingTypes: [
        { value: 'shirt', label: '衬衫' },
        { value: 'tshirt', label: 'T恤' },
        { value: 'dress', label: '连衣裙' },
        { value: 'suit', label: '西装' },
        { value: 'pants', label: '裤子' },
        { value: 'coat', label: '外套' },
        { value: 'skirt', label: '裙子' }
      ],
      styleTypes: [
        { value: 'casual', label: '休闲' },
        { value: 'formal', label: '正式' },
        { value: 'business', label: '商务' },
        { value: 'sports', label: '运动' },
        { value: 'vintage', label: '复古' },
        { value: 'bohemian', label: '波西米亚' },
        { value: 'minimalist', label: '极简' }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      designWorks: [],
      uploadDialogVisible: false,
      previewDialogVisible: false,
      previewWorkDialogVisible: false,
      previewImageUrl: '',
      workForm: {
        title: '',
        clothingType: '',
        style: '',
        description: '',
        coverImage: '',
        detailImages: [],
        keywords: []
      },
      workRules: {
        title: [
          { required: true, message: '请输入作品标题', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        clothingType: [
          { required: true, message: '请选择服装类型', trigger: 'change' }
        ],
        style: [
          { required: true, message: '请选择设计风格', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入作品描述', trigger: 'blur' }
        ]
      },
      currentWork: null,
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 模拟获取数据
      setTimeout(() => {
        this.designWorks = [
          {
            id: 1,
            title: '夏日清凉连衣裙',
            clothingType: '连衣裙',
            style: '休闲',
            status: 'approved',
            createTime: '2023-04-15',
            views: 1256,
            likes: 342,
            coverImage: 'https://picsum.photos/id/239/400/300',
            detailImages: [
              'https://picsum.photos/id/240/800/600',
              'https://picsum.photos/id/241/800/600',
              'https://picsum.photos/id/242/800/600'
            ],
            description: '这是一款适合夏日穿着的连衣裙，采用轻薄透气的面料，设计简约大方，适合各种场合穿着。',
            keywords: ['夏季', '清凉', '连衣裙', '简约'],
            commentCount: 56,
            favoriteCount: 120,
            orderCount: 25
          },
          {
            id: 2,
            title: '商务正装西装套装',
            clothingType: '西装',
            style: '商务',
            status: 'approved',
            createTime: '2023-04-20',
            views: 986,
            likes: 267,
            coverImage: 'https://picsum.photos/id/243/400/300',
            detailImages: [
              'https://picsum.photos/id/244/800/600',
              'https://picsum.photos/id/245/800/600'
            ],
            description: '专为商务场合设计的西装套装，剪裁精致，面料高档，展现专业形象。',
            keywords: ['商务', '正装', '西装', '职场'],
            commentCount: 34,
            favoriteCount: 89,
            orderCount: 15
          },
          {
            id: 3,
            title: '复古风牛仔外套',
            clothingType: '外套',
            style: '复古',
            status: 'pending',
            createTime: '2023-05-05',
            views: 456,
            likes: 123,
            coverImage: 'https://picsum.photos/id/246/400/300',
            detailImages: [
              'https://picsum.photos/id/247/800/600',
              'https://picsum.photos/id/248/800/600'
            ],
            description: '复古风格的牛仔外套，融合现代元素，时尚有型。',
            keywords: ['复古', '牛仔', '外套', '时尚'],
            commentCount: 28,
            favoriteCount: 67,
            orderCount: 8
          },
          {
            id: 4,
            title: '简约风T恤设计',
            clothingType: 'T恤',
            style: '极简',
            status: 'draft',
            createTime: '2023-05-10',
            views: 324,
            likes: 98,
            coverImage: 'https://picsum.photos/id/249/400/300',
            detailImages: [
              'https://picsum.photos/id/250/800/600'
            ],
            description: '极简风格T恤设计，简约不简单，适合日常穿着。',
            keywords: ['简约', 'T恤', '日常', '舒适'],
            commentCount: 16,
            favoriteCount: 42,
            orderCount: 5
          }
        ]
        this.pagination.total = this.designWorks.length
      }, 500)
    },
    handleSearch() {
      this.fetchData()
    },
    resetFilter() {
      this.filterForm = {
        status: '',
        clothingType: '',
        dateRange: []
      }
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    },
    getStatusText(status) {
      const map = {
        draft: '草稿',
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return map[status] || status
    },
    getStatusClass(status) {
      const map = {
        draft: 'status-draft',
        pending: 'status-pending',
        approved: 'status-approved',
        rejected: 'status-rejected'
      }
      return map[status] || ''
    },
    handleUpload() {
      this.workForm = {
        title: '',
        clothingType: '',
        style: '',
        description: '',
        coverImage: '',
        detailImages: [],
        keywords: []
      }
      this.uploadDialogVisible = true
    },
    handleEdit(item) {
      this.workForm = { ...item }
      this.uploadDialogVisible = true
    },
    handleDelete(item) {
      this.$confirm('此操作将永久删除该作品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除操作
        const index = this.designWorks.findIndex(work => work.id === item.id)
        if (index !== -1) {
          this.designWorks.splice(index, 1)
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handlePreview(item) {
      this.currentWork = item
      this.previewWorkDialogVisible = true
    },
    handleCoverChange(file) {
      this.workForm.coverImage = URL.createObjectURL(file.raw)
    },
    handlePictureCardPreview(file) {
      this.previewImageUrl = file.url
      this.previewDialogVisible = true
    },
    handleRemove(file, fileList) {
      // 处理删除图片
    },
    submitWorkForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 模拟提交表单
          this.$message.success('作品保存成功！')
          this.uploadDialogVisible = false
          this.fetchData()
        } else {
          return false
        }
      })
    },
    handleTagClose(tag) {
      this.workForm.keywords.splice(this.workForm.keywords.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue && this.workForm.keywords.indexOf(inputValue) === -1) {
        this.workForm.keywords.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style scoped>
.design-works-container {
  padding: 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 60px);
  background-color: var(--page-background);
}

.filter-card {
  margin-bottom: 20px;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.work-card {
  transition: all 0.3s;
  overflow: hidden;
}

.work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.work-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.work-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.status-draft {
  background-color: #909399;
}

.status-pending {
  background-color: #E6A23C;
}

.status-approved {
  background-color: #67C23A;
}

.status-rejected {
  background-color: #F56C6C;
}

.work-info {
  padding: 15px;
}

.work-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
  margin-bottom: 10px;
}

.work-tags {
  margin-bottom: 10px;
}

.work-tags .el-tag {
  margin-right: 5px;
}

.work-actions {
  display: flex;
  justify-content: flex-end;
}

.pagination-container {
  margin: 20px 0;
  text-align: right;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.preview-title {
  margin-bottom: 15px;
}

.preview-meta {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  color: #606266;
  font-size: 14px;
}

.preview-tags {
  margin-bottom: 15px;
}

.preview-tags .el-tag {
  margin-right: 8px;
}

.preview-description {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.preview-images {
  margin-bottom: 20px;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-stats {
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-top: 5px;
}
</style> 